<template>
  <div class="divShow">
    <div style="padding: 30px;">
      <!-- 搜索框 -->
      <el-form :inline="true" :model="searchToolType" class="demo-form-inline">
        <el-form-item label="类型编码">
          <el-input v-model="searchToolType.toolTypeCode" placeholder="请输入类型编码"></el-input>
        </el-form-item>
        <el-form-item label="类型名称">
          <el-input v-model="searchToolType.toolTypeName" placeholder="请输入类型名称"></el-input>
        </el-form-item>
        <el-form-item label="保养维护类型">
          <el-select v-model="searchToolType.maintenType" placeholder="请选择保养维护类型">
            <el-option
              v-for="item in maintenTypeList"
              :key="item.toolTypeId"
              :label="item.maintenType"
              :value="item.toolTypeId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="loadPage">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 按钮 -->
      <el-button type="primary" size="small" @click="showDialog">新增</el-button>
      <el-button type="success" size="small">修改</el-button>
      <el-button type="danger" size="small">删除</el-button>

      <!-- 表格 -->
      <el-table :data="pageData.data" stripe style="width: 100%;">
        <el-table-column prop="toolTypeCode" label="类型编码" width="180">
        </el-table-column>
        <el-table-column prop="toolTypeName" label="类型名称" width="180">
        </el-table-column>
        <el-table-column prop="codeFlag" label="是否编码管理">
        </el-table-column>
        <el-table-column prop="maintenType" label="保养维护类型">
        </el-table-column>
        <el-table-column prop="maintenPeriod" label="保养周期">
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="edit(scope.$index,scope.row)">修改</el-link>
            <el-link type="primary" @click="del(scope.$index,scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination id="page"
                     background
                     layout="prev, pager, next"
                     @current-change="pageNoChange"
                     :page-size="pageData.pageSize"
                     :total="pageData.totalCount"
      >
      </el-pagination>
    </div>

    <el-dialog :title="(saveForm.toolTypeId == null ? '添加' : '编辑') + '影视信息'" :visible.sync="dialogFormVisible">
      <el-form :model="saveForm">
        <el-form-item label="类型ID" label-width="120" v-show="false">
          <el-input type="hidden" v-model="saveForm.toolTypeId" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="类型编码" :label-width="formLabelWidth">
          <el-input v-model="saveForm.toolTypeCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型名称" :label-width="formLabelWidth">
          <el-input v-model="saveForm.toolTypeName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否编码管理" :label-width="formLabelWidth">
          <el-form-item>
            <el-radio-group v-model="saveForm.codeFlag">
              <el-radio label="1">Y</el-radio>
              <el-radio label="2">N</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form-item>
        <el-form-item label="保养维护类型" :label-width="formLabelWidth">
          <el-input v-model="saveForm.maintenType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="saveForm.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSave()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import qs from 'qs';
import axios from 'axios';

export default {
  data() {
    return {
      dialogFormVisible : false,
      formLabelWidth:'120px',
      searchToolType: {
        toolTypeId:null,
        toolTypeCode: '',
        toolTypeName: '',
        maintenType: ''
      },
      saveForm: {
        toolTypeId:null,
        toolTypeCode: '',
        toolTypeName: '',
        codeFlag: '',
        maintenType:'',
        remark: '',
        createBy:'',
        updateBy:'',
        token:''
      },
      value: '',
      maintenTypeList: [],
      pageData: {
        pageNo: 1,
        pageSize: 5,
        data: [],
        totalCount: 0,
        totalPageCount: 1
      },
    };
  },
  mounted() {
    this.loadPage();
    this.loadMaintenTypeList();
  },
  methods: {
    showDialog() {
      this.saveForm = {
        toolTypeId:null,
        toolTypeCode: '',
        toolTypeName: '',
        codeFlag: '',
        maintenType: '',
        maintenPeriod: '',
        remark: ''
      };
      this.dialogFormVisible = true;
    },
    async loadPage() {
      let queryStr=qs.stringify(this.searchToolType);

      this.$axios.post("/api/typePage",queryStr).then(res=>{
        this.pageData=res.data;
      })
    },
    loadMaintenTypeList(){
      this.$axios.get("/api/maintenTypeList").then(res=>{
        this.maintenTypeList = res.data
      })
    },
    doSave(){
      let queryStr = qs.stringify(this.saveForm);
      //获取存在前端的token
      let dlyk_token = localStorage.getItem('dlyk_token');
      this.saveForm.token = dlyk_token;
      this.$axios.post("/api/save", queryStr)
        .then(res => {
          // 获得后端返回的数据
          let data = res.data;
          if (data.code == 0) {
            // 关闭新增框
            this.dialogFormVisible = false;
            if (this.saveForm.toolTypeId != null) {
              // 提示信息
              this.$message.success("修改成功！");
            } else {
              this.$message.success("添加成功！");
            }
            // 刷新页面
            this.loadPage();
            this.loadMaintenTypeList();
          } else {
            this.$message.error(data.msg);
          }
        }).catch(error => {
        this.$message.error("请求失败，请稍后重试！")
      })
    },
    edit(index, row) {
      console.log(row)
      this.$axios.post('/api/detail', { toolTypeId: row.toolTypeId })
        .then(res => {
          let data = res.data;
          if (data.code == 0) {
            this.saveForm = data.data;
            this.dialogFormVisible = true;
          } else {
            this.$message.error("请求失败，请重试！");
          }
        })
        .catch(error => {
          this.$message.error("请求失败，请稍后重试！");
        });
    },
    del(index,row) {
      // 实现删除逻辑
      this.$confirm(`你确定要删除ID为：${row.toolTypeId} 的数据嘛？此操作将永久删除该记录, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用后端接口
        this.$axios.delete(`/api/del`, { params: { toolTypeId: row.toolTypeId } })
          .then(response => {
              // 获取后端返回的数据
              let data = response.data;
              console.log(data.code)
              // 判断是否成功
              if (data.code === 200) {
                // 提示成功
                this.$message.success('删除成功');
                // 重新查询
                this.loadPage();
              } else {
                this.$message.error("删除失败")
              }
            }
          )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    pageNoChange(pageNo) {
      this.pageData.pageNo = pageNo;
      this.loadPage();
    },
    resetForm() {
      this.searchToolType.toolTypeCode = '';
      this.searchToolType.toolTypeName = '';
      this.searchToolType.maintenType = '';
    }
  }
};
</script>

<style scoped>
/* 添加样式 */
#page {
  margin-top: 20px;
}
</style>
